<!--
 * @Author: jyq
 * @Date: 2022-06-30 09:20:14
 * @LastEditTime: 2022-07-08 11:03:51
 * @LastEditors: jyq
 * @Description: 
 * @FilePath: \dasantest2\day06\vue3-project\src\App.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
<van-tabbar clas="mytabbar" route v-model="active" v-if="$route.meta.showTabBar">
  <van-tabbar-item icon="home-o"  to="/" >主页</van-tabbar-item>
  <van-tabbar-item icon="apps-o" to="/about">分类</van-tabbar-item>
  <van-tabbar-item icon="cart-o" to="/order">购物车</van-tabbar-item>
  <van-tabbar-item icon="contact" to="/my">个人</van-tabbar-item>
</van-tabbar>
<router-view  />
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {useRouter}  from "vue-router"
const router = useRouter();
const a = ref(null) 
onMounted(()=>{
  switch(window.location.pathname) {
    case '/':a.value =0;  break;
    case '/about':a.value =1; break;
    case '/order':a.value=2; break;
    case '/my':a.value=3; break;
    default:a.value=0; break;
  }
})

const active = ref(a)




</script>

<style>
body{
  height: (100vh-50px);
  overflow-y: auto;
}
.mytabbar{
  position: fixed;
  top: 0px;
}
</style>
